import React,{Component} from 'react'
import styled from 'styled-components'
import { Link,NavLink } from 'react-router-dom'
 
const TabBarContainer = styled.footer`
    width:100%;
    height:.44rem
    ul{
        height:99.9%;
        display:flex;
        justify-content:space-around;
        
        li{
            i{
                font-size:.29rem
               margin-bottom:.04rem 
            }
            a{
                display:flex;
                height:100%;
                flex-direction:column;
                justify-content:center;
                &.active{
                   i{
                     color:#f8a120
                   }
                   span{
                      color:#f8a120
                   } 
                }
                span{
                    font-size:.11rem
                }
            }
        }
    }

   
`
const Item = props =>{
    return(
        <li>
          <NavLink
           to = {props.path}
           activeClassName = "active"
          >
                <i className={'fa fa-'+ props.iconName}></i>
                <span> {props.text} </span>   
          </NavLink>
                      
        </li>
    )
}

class TabBar extends Component {

    constructor(props){
        super(props)
        this.state = {
            tabs:[
                {
                    id:1,
                    text:'首页',
                    iconName:'home',
                    path:'/home',

                },
                {
                    id:2,
                    text:'品牌',
                    iconName:'gift',
                    path:'/famous',

                },
                {
                    id:3,
                    text:'分类',
                    iconName:'list-ul',
                    path:'/category',

                },
                {
                    id:4,
                    text:'购物袋',
                    iconName:'shopping-bag',
                    path:'/shopcar',

                },
                {
                    id:5,
                    text:'我的',
                    iconName:'user-circle',
                    path:'/mine',

                }

            ]
        }
    }

    renderItem = () =>{
      return this.state.tabs.map(item => <Item key = {item.id} {...item}/>)
    }

    render(){
        return(
           <TabBarContainer>
               <ul>
                   {this.renderItem()}
               </ul>
           </TabBarContainer>
        )
    }
}

export default TabBar